<template>
	<div style="border: 1px solid #ccc">
		<vue-ueditor-wrap
			v-model="data"
			:config="editorConfig"
			:editorDependencies="['ueditor.config.js', 'ueditor.all.js']"
			ref="editorRef"
		></vue-ueditor-wrap>
		<diy-storage ref="storageImg" style="display: none" @confirm="getAttachmentFileList"></diy-storage>
		<diy-storage
			ref="storageVideo"
			type="video"
			accept=".rm,.rmvb,.wmv,.avi,.mpg,.mpeg,.mp4"
			style="display: none"
			@confirm="getAttachmentVideoFileList"
		></diy-storage>
	</div>
</template>

<script setup name="DiyEditor">
import { ref } from 'vue';
import { VueUeditorWrap } from 'vue-ueditor-wrap';
import { useVModel } from '@vueuse/core';
import DiyStorage from '@/components/upload/storage.vue';
import { Session } from '@/utils/storage';
const editorRef = ref();
const storageImg = ref(null);
const storageVideo = ref(null);

const props = defineProps({
	modelValue: {
		type: String,
		default: '',
	},
	height: {
		type: Number,
		default: 300,
	},
});

const emit = defineEmits(['update:modelValue', 'handleBlur']);
const data = useVModel(props, 'modelValue', emit);

const serverHeaders = {
	Authorization: Session.get('token'),
};
console.log(import.meta.env);
const editorConfig = ref({
	debug: false,
	UEDITOR_HOME_URL: import.meta.env.MODE == 'development' ? '/public/ueditor/' : 'ueditor/',
	serverUrl: (process.env.NODE_ENV === 'production' ? '' : '/api') + '/sys/storage/upload',
	serverHeaders,
	// 编辑器不自动被内容撑高
	autoHeightEnabled: false,
	// 初始容器高度
	initialFrameHeight: props.height,
	// 初始容器宽度
	initialFrameWidth: '100%',
	toolbarCallback: function (cmd, editor) {
		editorRef.value = editor;
		if (cmd == 'insertimage') {
			storageImg.value.handleStorageDlg('', '上传图片');
			return true;
		} else if (cmd == 'insertvideo') {
			storageVideo.value.handleStorageDlg('', '上传视频');
			return true;
		}
	},
});

const getAttachmentFileList = (files) => {
	if (!files.length) {
		return;
	}
	files.forEach((element) => {
		editorRef.value?.execCommand('insertHtml', "<img src='" + element.url + "'/>");
	});
};

const getAttachmentVideoFileList = (files) => {
	if (!files.length) {
		return;
	}
	files.forEach((element) => {
		editorRef.value?.execCommand('insertHtml', "<video src='" + element.url + "'/>");
	});
};
</script>
